<template>
  <div>
    <input placeholder="输入关键字搜索" v-model="num" v-show="flag">
    <table class="my-table" v-show="flag">
      <thead>
        <tr>
          <th>就诊日期</th>
          <th>医生姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
  <tbody>
        
        <!-- <tr >
          <td>2020-12-12</td>
          <td>章三</td>
          <td>李四</td>
          <td>健康</td>
          <td>详情</td>
        </tr> -->
     <RenderData v-for="item in list" 
     :key="item.id"
    
     :ame="item.id"
     :ame1="item.n1"
     :ame2="item.na2"
     :ame3="item.nam3"
     :ame4="item.name4"
     @fn="fn" v-show="flag"></RenderData>
      
      </tbody>
       
      
    </table> 
    
     <RenRen v-show="!flag" :jie="jie" @fn1="fn1"></RenRen>
       
  </div>
</template>
<script>
import RenderData from './components/RenderData.vue'
import RenRen from './components/RenRen.vue'
export default {
  components: {
    RenRen,
RenderData
  },
data(){
    return {
list :[
  {
   id:'6969',
  n1: '张三',
  na2:'感冒',
  nam3: '感冒药',
  name4:'详情',
  
  },
   {
   id:'8848',
  n1: '张',
  na2:'感',
  nam3: '感',
  name4:'详情',
  },
   {
   id:'1314',
  n1: '小罗',
  na2:'正常',
  nam3: '篮球场',
  name4:'详情',
  
  },
   {
   id:'520',
  n1: '小苏',
  na2:'正常',
  nam3: '健身房',
  name4:'详情',
  
  },
],
num: '',
num1:'',
flag: true,
jie: '',
ji: '',
    }
  },
  methods: {
fn(id){
  this.ji = JSON.parse(JSON.stringify(this.list))
  this.jie = this.list.filter(item => item.id === id)
  this.flag = !this.flag
  // console.log(jiejie);
},
fn1(){
  this.flag = !this.flag
this.list = this.ji
}
  },
  watch: {
    num(){
      if(this.list.find(item => item.n1 === this.num || item.id === this.num || item.na2 === this.num || item.nam3 === this.num)){
      this.num1 = JSON.parse(JSON.stringify(this.list))
      this.list = this.list.filter(item => item.n1 === this.num || item.id === this.num || item.na2 === this.num || item.nam3 === this.num)
      }else{
        if(this.num1) {
        this.list = JSON.parse(JSON.stringify(this.num1))
        }
      }

    }
  }
}
  

</script>


<style>
 .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
</style>